<!DOCTYPE html>
<html>

<head>
    <title>Vue源码剖析</title>
    <script src="../../dist/vue.js"></script>
</head>

<body>
    <div id="demo">
        <h1>异步更新</h1>
        <p id="p1">{{foo}}</p>
    </div>
    <script>
        // 创建实例
        const app = new Vue({
    el: '#demo',
    data: { foo: 'ready~~' },
    mounted() {
        this.foo = Math.random()
        console.log('1:' + this.foo);
        this.foo = Math.random()
        console.log('2:' + this.foo);
        this.foo = Math.random()
        console.log('3:' + this.foo);
        // 异步行为，此时内容没变
        console.log('p1.innerHTML:' + p1.innerHTML)
        this.$nextTick(() => {
            // 这里才是最新的值
            console.log('p1.innerHTML:' + p1.innerHTML)
        })
    }
});
    </script>
</body>

</html>
